<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<c:set var="ctx" value="${pageContext.request.contextPath}" />

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>流量监控</title>
<%@ include file="/WEB-INF/view/common/include.jsp"%>
<link href="${ctx}/resources/style/main.css" rel="stylesheet">
<script src="${ctx}/resources/pluginJs/hightcharts-4.1.5/highcharts.js"></script>
<script src="${ctx}/resources/pluginJs/hightcharts-4.1.5/themes/grid-light.js"></script>
<script
	src="${ctx}/resources/pluginJs/hightcharts-4.1.5/highcharts-more.js"></script>
<script type="text/javascript"
	src="${ctx}/resources/useJs/monitor/netTraffic.js"></script>
<script type="text/javascript"
	src="${ctx}/resources/pluginJs/jquery-easyui-1.4.1/easyui-patch.js"></script>
<script type="text/javascript"
	src="${ctx}/resources/pluginJs/zTree/js/jquery.ztree.core-3.5.min.js"></script>
<link rel="stylesheet" type="text/css"
	href="${ctx}/resources/pluginJs/jquery-easyui-1.4.1/themes/icon.css">
<link rel="stylesheet" type="text/css"
	href="${ctx}/resources/pluginJs/jquery-easyui-1.4.1/themes/color.css">
<link href="${ctx}/resources/pluginJs/zTree/css/ztree.css"
	rel="stylesheet">
<style type="text/css">
.ztree LI SPAN.button {
	filter: none;
}

.tab_custom {
	bolder-right: 1px solid #95B8E7 !important;
}
</style>
</head>
<body class="easyui-layout">
	<!-- ------------------ -->
	<div id="main_center" region="center" split="false" bolder="false">
		<div id="aa" class="easyui-layout" data-options="fit : true,bolder : true" style="margin-top:5px; margin-left:4px;padding-left: 4px;padding-right: 5px;padding-bottom: 5px;">
			<!-- 查询 -->
			<div data-options="region:'north',split:false" title="查询条件" style="height:80px;padding:10px;">
				<form id="capacityForm">
					<table style="width: 90%">
						<tr>
							<td>
								<input type="radio" name="searchType" value="day" checked="checked">按天查询
								<input type="radio" name="searchType" value="hour">按小时查询
								<input type="radio" name="searchType" value="min">按分钟查询
							</td>
							<td nowrap="nowrap">
								   创建时间：&nbsp;
								<input id="start" name="beginDate" type="text" style="width: 178px; height: 20px;"></input>
								&nbsp;至 &nbsp;<input id="end" name="endDate" type="text" style="width: 178px; height: 20px;"></input>
							</td>
							<td nowrap="nowrap">
							&nbsp;
							</td>
							<td nowrap="nowrap" class="table_right">
								<a href="#"	onclick="searchCapacity();" class="easyui-linkbutton" icon="icon-search">查询</a>
							</td>
						</tr>
					</table>
				</form>
			</div>
			<div data-options="region:'south',split:true" region="center" title="流量监控" style="height:100%;padding:10px;">
				<!-- 二层 -->
				<div class="easyui-layout" data-options="fit : false,bolder : true" style="margin-top:5px; margin-left:4px;padding-left: 4px;padding-right: 5px;padding-bottom: 5px;">
					<c:forEach items="${groups}" var="groupb"  varStatus="groupstatus">
						<!-- 面板1 -->
						<div class="easyui-panel" style="width:100%;padding:10px;postion:relative;"
								data-options="title:'${groupb.groupName}',collapsible:true,closable:true">
								<!-- 遍历storage -->
								<c:forEach items="${groupb.storageList}" var="storage" varStatus="storagestatus">
									<div class="easyui-layout" style="height: 300px;padding:5px;">
									<div data-options="region:'center'" style="vertical-align: bottom;">


										<div id="capacityLine${storage.ipAddr}" val="${storage.ipAddr}" class="capacityLine"
										style="width: 100%; height:100%; vertical-align: bottom;"></div>

									</div>
									</div>
								</c:forEach>
						</div>
					</c:forEach>
				</div>
			</div>
		</div>
	</div>
</body>
</html>
